<template>
  <div class="order-management">
    <!-- 订单状态选项卡 -->
    <div class="order-tabs">
      <el-tabs v-model="status" @tab-change="handleTabChange">
        <el-tab-pane label="全部订单" name="null"></el-tab-pane>
        <el-tab-pane label="待进行订单" name="1"></el-tab-pane>
        <el-tab-pane label="进行中订单" name="2"></el-tab-pane>
        <el-tab-pane label="已完成订单" name="3"></el-tab-pane>
        <el-tab-pane label="售后订单" name="5"></el-tab-pane>
      </el-tabs>
    </div>

    <!-- 订单列表 -->
    <div class="order-list">
      <el-table :data="orderList" style="width: 100%">
        <el-table-column prop="id" label="订单号" width="180"></el-table-column>
        <el-table-column
          prop="playmateName"
          label="陪玩"
          width="120"
        ></el-table-column>
        <el-table-column prop="createTime" label="下单时间" width="180">
          <template #default="scope">
            {{ formatDateTime(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="orderStartTime" label="开始时间" width="180">
          <template #default="scope">
            {{ formatDateTime(scope.row.orderStartTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="orderEndTime" label="结束时间" width="180">
          <template #default="scope">
            {{ formatDateTime(scope.row.orderEndTime) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="orderMoney"
          label="订单金额"
          width="120"
        ></el-table-column>
        <el-table-column prop="orderStatus" label="订单状态" width="120">
          <template #default="scope">
            <el-tag :type="getStatusTagType(scope.row.orderStatus)">
              {{ getStatusText(scope.row.orderStatus) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button size="small" @click="viewOrderDetail(scope.row)">
              查看详情
            </el-button>
            <el-button
              v-if="scope.row.status === 'pending'"
              size="small"
              type="primary"
              @click="startProcessing(scope.row)"
            >
              开始处理
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalOrders"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import bossApi from "@/http/bossApi";
export default {
  name: "MyOrder",
  data() {
    return {
      status: null, // 默认显示全部订单 null 表示全部 1=待进行 2=进行中 3=已完成 4=已退款 5=售后处理
      orderList: [], // 当前显示的订单列表
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示条数
      totalOrders: 0, // 总订单数
      tenantId: 1,
      id: "", //老板id
    };
  },
  methods: {
    getStatusTagType(status) {
      const statusMap = {
        1: "info", // 待进行 - 灰色
        2: "warning", // 进行中 - 橙色
        3: "success", // 已完成 - 绿色
        5: "danger", // 售后 - 红色
      };
      return statusMap[status] || "info";
    },
    getStatusText(status) {
      const textMap = {
        1: "待进行",
        2: "进行中",
        3: "已完成",
        5: "售后处理",
      };
      return textMap[status] || "未知状态";
    },

    viewOrderDetail(order) {
      // 查看订单详情逻辑
      console.log("查看订单详情:", order);
    },

    startProcessing(order) {
      // 开始处理订单逻辑
      console.log("开始处理订单:", order);
    },

    // 处理每页显示条数变化
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1; // 重置到第一页
      this.getOrderByStatus();
    },

    // 处理当前页变化
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getOrderByStatus();
    },
    getOrderByStatus() {
      bossApi
        .getOrderByStatus({
          status: this.status,
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          tenantId: this.tenantId,
          id: this.id,
        })
        .then((res) => {
          console.log(res.data);
          this.orderList = res.data;
          if (res.data == null) {
            this.totalOrders = 0;
            return;
          }
          this.totalOrders = res.data.length;
        });
    },
    getUser() {
      const userStr = localStorage.getItem("user");
      if (!userStr) {
        console.warn("查询失败，请重新登录后尝试");
        return;
      }
      try {
        this.user = JSON.parse(userStr);
        this.id = this.user.id;
      } catch (e) {
        console.error("用户信息解析失败:", e);
      }
    },
    // 修改 handleTabChange 方法
    handleTabChange(status) {
      this.status = status === "" ? null : parseInt(status); // 将空字符串转换为 null
      this.currentPage = 1;
      this.getOrderByStatus();
    }, // 时间格式化方法
    formatDateTime(dateTime) {
      if (!dateTime) return "-";
      // 创建Date对象
      const date = new Date(dateTime);
      // 格式化为 YYYY-MM-DD HH:mm:ss
      return date
        .toLocaleString("zh-CN", {
          year: "numeric",
          month: "2-digit",
          day: "2-digit",
          hour: "2-digit",
          minute: "2-digit",
          second: "2-digit",
          hour12: false,
        })
        .replace(/\//g, "-");
    },
  },
  created() {
    this.getUser();
    this.getOrderByStatus();
  },
  watch: {
    status(newVal) {
      if (newVal !== null && newVal !== undefined) {
        this.currentPage = 1;
        this.getOrderByStatus();
      }
    },
  },
};
</script>

<style scoped>
.order-management {
  padding: 20px;
  background-color: #fff;
}

.order-tabs {
  margin-bottom: 20px;
  border-bottom: 1px solid #ebeef5;
}

.order-list {
  margin-top: 20px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

@media (max-width: 768px) {
  .order-management {
    padding: 10px;
  }

  :deep(.el-table) {
    font-size: 12px;
  }

  :deep(.el-table .cell) {
    padding: 0 5px;
  }

  .pagination-container {
    :deep(.el-pagination__sizes) {
      display: none;
    }

    :deep(.el-pagination__jump) {
      display: none;
    }
  }
}
</style>
